import React, { useEffect } from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = (props) => {
  const { dispatch, products } = props

  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }

  useEffect(() => {
    dispatch({
      type: 'products/loadData'
    })
  }, [dispatch])

  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

// export default Products;
export default connect(
  ({ products }) => ({
  products,
}))(Products);